﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
    <div>The buttons can be grouped by putting them in a ButtonGroup component.</div>
    <br />
    <BitButtonGroup Items="basicItems" />
</DemoExample>

<DemoExample Title="Variant" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
    <div>The ButtonGroup has three variants: Fill (default), Outline, and Text..</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Variant="BitVariant.Fill" Items="disabledItems" />
        <BitButtonGroup Variant="BitVariant.Fill" Items="basicItems" IsEnabled="false" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Variant="BitVariant.Outline" Items="disabledItems" />
        <BitButtonGroup Variant="BitVariant.Outline" Items="basicItems" IsEnabled="false" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" Items="basicItems" />
        <BitButtonGroup Variant="BitVariant.Text" Items="disabledItems" />
        <BitButtonGroup Variant="BitVariant.Text" Items="basicItems" IsEnabled="false" />
    </div>
</DemoExample>

<DemoExample Title="Icon" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
    <div>Each item in the ButtonGroup can have an icon.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" Items="iconItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" Items="iconItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" Items="iconItems" />
    </div>
</DemoExample>

<DemoExample Title="IconOnly" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
    <div>The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" Items="iconItems" IconOnly />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" Items="iconItems" IconOnly />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" Items="iconItems" IconOnly />
    </div>
    <br /><br />
    <div>Alternatively, each button can be set to IconOnly by simply leaving the text field empty.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" Items="onlyIconItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" Items="onlyIconItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" Items="onlyIconItems" />
    </div>
</DemoExample>

<DemoExample Title="ReversedIcon" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
    <div>Reverses the positions of the icon and the main content of the button.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Variant="BitVariant.Fill" Items="reversedIconItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Variant="BitVariant.Outline" Items="reversedIconItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Variant="BitVariant.Text" Items="reversedIconItems" />
    </div>
</DemoExample>

<DemoExample Title="Toggle" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>The Toggle in BitButtonGroup allows you to control the active or inactive state of each button, providing clear visual feedback to users about which buttons are selected or currently in use.</div>
    <br /><br />
    <div class="example-content">
        <div>Fill (default)</div>
        <BitButtonGroup Toggle Variant="BitVariant.Fill" Items="toggledItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Outline</div>
        <BitButtonGroup Toggle Variant="BitVariant.Outline" Items="toggledItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Text</div>
        <BitButtonGroup Toggle Variant="BitVariant.Text" Items="toggledItems" />
    </div>
    <br /><br /><br /><br />
    <div>Binding:</div><br />
    <BitButtonGroup Toggle Variant="BitVariant.Outline" Items="toggledItems" @bind-ToggleKey="toggleKey" />
    <div>Toggle key: @toggleKey</div>
    <BitButton OnClick="@(() => toggleKey = "forward")">Forward</BitButton>
    <br /><br /><br /><br />
    <div>OnToggleChange:</div><br />
    <BitButtonGroup Toggle Variant="BitVariant.Outline" Items="changeToggledItems" DefaultToggleKey="forward" OnToggleChange="(BitButtonGroupItem i) => onChangeToggleItem = i" />
    <div>Changed toggle: @onChangeToggleItem?.Key , @onChangeToggleItem?.IsToggled</div>
</DemoExample>

<DemoExample Title="Vertical" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
    <div>By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the <strong>Vertical</strong> property.</div>
    <br /><br />
    <div class="buttons-container">
        <div class="example-content">
            <div>Fill (default)</div>
            <BitButtonGroup Variant="BitVariant.Fill" Items="basicItems" Vertical />
        </div>
        <br /><br />
        <div class="example-content">
            <div>Outline</div>
            <BitButtonGroup Variant="BitVariant.Outline" Items="basicItems" Vertical />
        </div>
        <br /><br />
        <div class="example-content">
            <div>Text</div>
            <BitButtonGroup Variant="BitVariant.Text" Items="basicItems" Vertical />
        </div>
    </div>
</DemoExample>

<DemoExample Title="Events" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <div>Managing button click events.</div>
    <br /><br />
    <div class="example-content">
        <div>Component's ItemClick event:</div>
        <BitButtonGroup Items="basicItems" OnItemClick="(BitButtonGroupItem item) => clickedItem = item.Text" />
        <div>Clicked item: <b>@clickedItem</b></div>
    </div>
    <br /><br />
    <div class="example-content">
        <div>Item's Click event:</div>
        <BitButtonGroup Items="eventsItems" />
        <div>Click count: <b>@clickCounter</b></div>
    </div>
</DemoExample>

<DemoExample Title="Size" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
    <div>Different sizes for buttons to meet design needs, ensuring flexibility within your application.</div>
    <br /><br />
    <div class="example-content">
        <div>Small</div>
        <BitButtonGroup Size="BitSize.Small" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Size="BitSize.Small" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Size="BitSize.Small" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Medium</div>
        <BitButtonGroup Size="BitSize.Medium" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Size="BitSize.Medium" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Size="BitSize.Medium" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Large</div>
        <BitButtonGroup Size="BitSize.Large" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Size="BitSize.Large" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Size="BitSize.Large" Variant="BitVariant.Text" Items="basicItems" />
    </div>
</DemoExample>

<DemoExample Title="FullWidth" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
    <div>Setting the FullWidth makes the button group occupy 100% of its container's width.</div>
    <br /><br />
    <div class="example-content">
        <BitButtonGroup FullWidth Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup FullWidth Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup FullWidth Variant="BitVariant.Text" Items="basicItems" />
    </div>
</DemoExample>

<DemoExample Title="Color" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
    <div>Offering a range of specialized colors, providing visual cues for specific states within your application.</div>
    <br /><br />
    <div class="example-content">
        <div>Primary</div>
        <BitButtonGroup Color="BitColor.Primary" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Primary" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Primary" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Secondary</div>
        <BitButtonGroup Color="BitColor.Secondary" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Secondary" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Secondary" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Tertiary</div>
        <BitButtonGroup Color="BitColor.Tertiary" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Tertiary" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Tertiary" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Info</div>
        <BitButtonGroup Color="BitColor.Info" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Info" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Info" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Success</div>
        <BitButtonGroup Color="BitColor.Success" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Success" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Success" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Warning</div>
        <BitButtonGroup Color="BitColor.Warning" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Warning" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Warning" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>SevereWarning</div>
        <BitButtonGroup Color="BitColor.SevereWarning" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.SevereWarning" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.SevereWarning" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Error</div>
        <BitButtonGroup Color="BitColor.Error" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Error" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.Error" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
        <div class="example-content">
            <div style="color:var(--bit-clr-bg-pri)">PrimaryBackground</div>
            <BitButtonGroup Color="BitColor.PrimaryBackground" Variant="BitVariant.Fill" Items="basicItems" />
            <BitButtonGroup Color="BitColor.PrimaryBackground" Variant="BitVariant.Outline" Items="basicItems" />
            <BitButtonGroup Color="BitColor.PrimaryBackground" Variant="BitVariant.Text" Items="basicItems" />
        </div>
        <br /><br />
        <div class="example-content">
            <div style="color:var(--bit-clr-bg-pri)">SecondaryBackground</div>
            <BitButtonGroup Color="BitColor.SecondaryBackground" Variant="BitVariant.Fill" Items="basicItems" />
            <BitButtonGroup Color="BitColor.SecondaryBackground" Variant="BitVariant.Outline" Items="basicItems" />
            <BitButtonGroup Color="BitColor.SecondaryBackground" Variant="BitVariant.Text" Items="basicItems" />
        </div>
        <br /><br />
        <div class="example-content">
            <div style="color:var(--bit-clr-bg-pri)">TertiaryBackground</div>
            <BitButtonGroup Color="BitColor.TertiaryBackground" Variant="BitVariant.Fill" Items="basicItems" />
            <BitButtonGroup Color="BitColor.TertiaryBackground" Variant="BitVariant.Outline" Items="basicItems" />
            <BitButtonGroup Color="BitColor.TertiaryBackground" Variant="BitVariant.Text" Items="basicItems" />
        </div>
    </div>
    <br /><br />
    <div class="example-content">
        <div>PrimaryForeground</div>
        <BitButtonGroup Color="BitColor.PrimaryForeground" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.PrimaryForeground" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.PrimaryForeground" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>SecondaryForeground</div>
        <BitButtonGroup Color="BitColor.SecondaryForeground" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.SecondaryForeground" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.SecondaryForeground" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>TertiaryForeground</div>
        <BitButtonGroup Color="BitColor.TertiaryForeground" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.TertiaryForeground" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.TertiaryForeground" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>PrimaryBorder</div>
        <BitButtonGroup Color="BitColor.PrimaryBorder" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.PrimaryBorder" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.PrimaryBorder" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>SecondaryBorder</div>
        <BitButtonGroup Color="BitColor.SecondaryBorder" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.SecondaryBorder" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.SecondaryBorder" Variant="BitVariant.Text" Items="basicItems" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>TertiaryBorder</div>
        <BitButtonGroup Color="BitColor.TertiaryBorder" Variant="BitVariant.Fill" Items="basicItems" />
        <BitButtonGroup Color="BitColor.TertiaryBorder" Variant="BitVariant.Outline" Items="basicItems" />
        <BitButtonGroup Color="BitColor.TertiaryBorder" Variant="BitVariant.Text" Items="basicItems" />
    </div>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
    <br /><br />
    <div class="example-content">
        <div>Component's style & class:</div>
        <BitButtonGroup Items="basicItems" Style="border-radius: 1rem; margin: 1rem; box-shadow: tomato 0 0 1rem;" />
        <BitButtonGroup Items="basicItems" Class="custom-class" Variant="BitVariant.Outline" />
    </div>
    <br /><br />
    <div class="example-content">
        <div>Item's style & class:</div>
        <BitButtonGroup Items="styleClassItems" Variant="BitVariant.Text" />
    </div>
    <br /><br />
    <div class="example-content">
        <div><b>Styles</b> & <b>Classes</b>:</div>
        <BitButtonGroup Items="basicItems"
                        Variant="BitVariant.Text"
                        Styles="@(new() { Button = "color: darkcyan; border-color: deepskyblue; background-color: azure;" })" />

        <BitButtonGroup Items="basicItems"
                        Variant="BitVariant.Text"
                        Classes="@(new() { Button = "custom-btn" })" />
    </div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
    <div>Use BitButtonGroup in right-to-left (RTL).</div>
    <br />
    <div dir="rtl">
        <BitButtonGroup Dir="BitDir.Rtl" Variant="BitVariant.Fill" Items="rtlItems" />
        <br /><br />
        <BitButtonGroup Dir="BitDir.Rtl" Variant="BitVariant.Outline" Items="rtlItems" />
        <br /><br />
        <BitButtonGroup Dir="BitDir.Rtl" Variant="BitVariant.Text" Items="rtlItems" />
    </div>
</DemoExample>